<template>
	<view class="table">
		<view class="table_header">
			<view class="">
				项目
			</view>
			<view class="">
				水泥
			</view>
			<view class="">
				砂
			</view>
			<view class="">
				碎石1
			</view>
			<view class="">
				碎石2
			</view>
			<view class="">
				碎石3
			</view>
			<view class="">
				水
			</view>
			<view class="">
				减水剂
			</view>
			<view class="">
				外渗料粉煤灰
			</view>
			<view class="">
				外渗料矿渣粉
			</view>
			<view class="">
				防水添加剂
			</view>
		</view>
		<view class="table_center">
			<view class="table_center1">
				<view class="center_" v-for="(item, index) in datas[0]"  :key="index" >
					<view class="" v-if="item == '基准配合比(Kg/m³)' || item === '基准配合比(Kg/m3)'">
						{{item}}
					</view>
					<input v-else type="text" :disabled="inputDisabled" v-model="datas[0][index]" />
				</view>
			</view>
			<view class="table_center1">
				<view class="center_" v-for="(item, index) in datas[1]"  :key="index" >
					<view class="" v-if="item == '含水率(%)'">
						{{item}}
					</view>
					<input type="text" v-else :disabled="inputDisabled" v-model="datas[1][index]"/>
				</view>
			</view>
			<view class="table_center1"  >
				<view class="center_" v-for="(item, index) in datas[2]"  :key="index" >
					<view class="" v-if="item == '生产配合比(Kg/m³)' || item == '生产配合比(Kg/m3)'">
						{{item}}
					</view>
					<input type="text" v-model="datas[2][index]" :disabled="inputDisabled" v-else/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			inputDisabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				datas: [
				  [
					"基准配合比(Kg/m3)",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					""
				  ],
				  [
					"含水率(%)",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					""
				  ],
				  [
					"生产配合比(Kg/m3)",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					"",
					""
				  ]
				],
			}
		},
	}
</script>

<style lang="less" scoped>
	.table {
		width: 100%;
		color: #a0a0a0;
		background-color: #fff;
		border-top: 1rpx solid #e5e5e5;
		display: flex;
		
		.table_header {
			width: 25%;
			text-align: center;
			
			view {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom:1rpx solid #e5e5e5;
			}
		}
		
		.table_center {
			width: 75%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			.table_center1 {
				width: 33.3333%;
				display: flex;
				align-items: center;
				flex-direction: column;
				border-left: 1rpx solid #e5e5e5;
				
				.center_ {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom:1rpx solid #e5e5e5;
					
					.center_titles {
						width: 100%;
						height: 100rpx;
						margin: 30rpx 0;
						word-wrap: break-word;
						overflow:hidden;
						word-break: break-all;
					}
				}
			}
			
			
		}
	}
</style>